.root {
  --owner-column-width: 140px;
  --rows-column-width: 80px;
  --published-column-width: 80px;

  height: 100%;
}

.header {
  display: flex;
  align-items: center;
  padding-left: var(--mantine-spacing-md);
  padding-bottom: var(--mantine-spacing-xs);
  border-bottom: 1px solid var(--mb-color-border);
  font-size: 0.75rem;
  font-weight: 700;
}

.headerCell {
  color: var(--mb-color-text-primary);
  font-size: rem(12px);
  font-weight: 700;
  align-items: center;
  flex: 0 0 auto;
}

.results {
  position: relative;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.item {
  --item-top-border-color: transparent;

  position: absolute;
  cursor: pointer;
  border-bottom: 1px solid var(--mb-color-border);

  &:focus-visible,
  &.selected {
    outline: 2px solid var(--mb-color-focus);

    --item-top-border-color: var(--mb-color-border);
  }

  &:hover {
    background-color: var(--mb-color-brand-lighter);

    --item-top-border-color: var(--mb-color-border);
  }

  &.active {
    color: var(--mb-color-brand);
    background-color: var(--mb-color-brand-light);

    --item-top-border-color: var(--mb-color-border);

    .icon {
      opacity: 1;
    }
  }
}

.icon {
  opacity: 0.5;
  flex-shrink: 0;
}

.database,
.schema,
.table,
.field {
  .icon {
    opacity: 1;
    color: var(--mb-color-text-dark);
  }
}

.checkbox {
  flex-shrink: 0;
  width: 40px;
  max-height: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkboxColumn {
  flex-shrink: 0;
  width: rem(40px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-right: var(--mantine-spacing-sm);
}

.chevronSlot {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chevron {
  transition: transform 100ms ease-in-out;
  opacity: 0.35;
  flex-shrink: 0;

  &.expanded {
    transform: rotate(90deg);
  }
}

.label {
  user-select: none;
  overflow-wrap: anywhere;
  white-space: nowrap;
}

.content {
  flex: 1;
  min-width: 0;
}

.column {
  color: var(--mb-color-text-light);
  font-size: 0.875rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.tableColumn {
  justify-content: flex-start;
}

.ownerColumn {
  flex-basis: var(--owner-column-width);
}

.rowsColumn {
  font-variant-numeric: tabular-nums;
  flex-basis: var(--rows-column-width);
}

.publishedColumn {
  flex-basis: var(--published-column-width);
}

.hidden {
  opacity: 0;
}

.visibilityToggle {
  flex-shrink: 0;

  &:focus,
  .item:hover &,
  .item:focus &,
  .item.selected &,
  .item.active & {
    opacity: 0.75;
  }
}

.massVisibilityToggle {
  flex-shrink: 0;
  opacity: 0;

  &:focus,
  .item:hover &,
  .item:focus &,
  .item.selected {
    opacity: 0.75;
  }
}
